<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@include file="menu/util.jsp" %>
<%@page contentType="text/html; charset=iso-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="semaphores" value="${requestScope.semaphores}" />
<c:set var="currentDrawing" value="${requestScope.currentDrawing}" />
<c:set var="colors" value="${requestScope.colors}" />
<c:set var="children" value="${requestScope.children}" />
<c:set var="left" value="${requestScope.left}" />
<c:set var="top" value="${requestScope.top}" />
<c:set var="scores" value="${requestScope.scores}" />
<c:set var="mapId" value="${requestScope.currentMap.idScoreCard}" />
<c:set var="currentScoreDomain" value="${sessionScope.currentScoreDomain}" />
<c:set var="scoreDomains" value="${sessionScope.scoresDomains}" />
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Vision Engager<%--<fmt:message key="login.title.tag" />--%></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <jsp:include page="../jsp/menu/header.jsp" />
        <link type="text/css" rel="stylesheet" href="jsp/css/screen.css" />
        <link type="text/css" rel="stylesheet" href="jsp/css/eggplant/jquery-ui-1.8.14.custom.css" />
        <script language="JavaScript1.2" type="text/javascript">
            $(document).ready(loadMap);
        </script>
    </head>
    <body>
        <jsp:include page="menu/banner.jsp" />
        <!--Begin Main Container-->
        <div id="contentContainer" class="container_16">
            <!--Begin Main Content-->
            <div id="contentContainer" class="grid_16">
                <!--Begin Left Bar -->
                <jsp:include page="menu/leftMenu.jsp" />
                <!--<div id="flechaCerrarPanel"><a href="#"><img src="jsp/css/img/desplegableCerrar.png" width="14" height="15" border="0" /></a></div>!-->
                <!--Begin Right Content Area -->
                <div id="rightContent" class="box1B" style="height:630px;">
                    <div id="titulos" >
                        <form action="" method="get">
                            <table width="100%" border="0" cellspacing="5" cellpadding="0">
                                <tr>
                                    <td align="right">Periodo: <span id="date" style="display:none"><fmt:formatDate value="${sessionScope.date}" pattern="dd/MM/yy" /></span></td>
                                    <td><input name="periodo" type="text" id="periodPicker" class="Fields" /></td>
                                    <td align="right">Comparador:</td>
                                    <td>
                                        <select name="comparador" class="Fields" id="comprador">
                                            <c:forEach items="${requestScope.comparationList}" var="comp" varStatus="cstatus">
                                                <option value="${comp.idComparation}" <c:if test="${comp.idComparation==sessionScope.comparation.idComparation}">selected="selected"</c:if>>${comp.name}</option>
                                            </c:forEach>
                                        </select>
                                    </td>                                   
                                    <td align="right">&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td align="center">
                                        <!--<a href="mapFinalUser.do" class="backlink"></a>-->
                                        <a href="mainFinalUser.do" id="viewSelector" class="graphViewIcon"></a>
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    <!-- contenido de centerContent -->
                    <div id="centerContent">
                        <div id="container" class="graphview" style="height:580px;overflow:hidden;">
                            <div id="scorecontainer" style="background-image:url(${currentDrawing.file}); width:725px; height:545px;">
                                <ul id="scores" class="items">
                                    <c:forEach items="${semaphores}" var="semaphore" varStatus="status">
                                        
                                        <li class="scoresemaphore" style="top:${top[semaphore]}px; left:${left[semaphore]}px;
                                            <c:if test="${colors[semaphore] != null && !empty colors[semaphore]}">
                                                background-color:#${colors[semaphore]};
                                            </c:if>">
                                            <a href="mainFinalUser.do?rootScoreCard=${semaphore.idScoreCard}&mapId=${mapId}">
                                                <div class="modal">
                                                    <span class="scoreLabel">Score: <fmt:formatNumber type="percent" value="${scores[semaphore]}" /></span>
                                                    <table style="table-layout:fixed; margin:10px 0;" cellpadding="0" border="0" width="100%">
                                                        <c:forEach items="${children[semaphore]}" var="child">
                                                            <tr><td width="10"><span class="childSemaphore" style="<c:if test="${colors[child] != null && !empty colors[child]}">
                                                                                                                        background-color:#${colors[child]};
                                                                                                                    </c:if>"></span></td>
                                                                <td width="90"><span class="label">${child.name}</span></td>
                                                                <td width="30"><span class="data"><fmt:formatNumber type="percent" value="${scores[child]}" /></span></td>
                                                            </tr>
                                                        </c:forEach>
                                                    </table>
                                                </div>
                                            </a>
                                        </li>
                                    </c:forEach>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- end de centerContent -->
                </div>
                <!--End Right Content Area -->
                <!--End Main Content-->
            </div>
            <jsp:include page="menu/footer.jsp" />
    </body>
</html>